<template>
  <div class="tab-content-container security-settings">
    <h3 class="section-title">安全设置</h3>
    
    <el-collapse v-model="activeNames">
      <el-collapse-item title="修改密码" name="1">
        <el-form 
          ref="passwordFormRef" 
          :model="passwordForm" 
          :rules="passwordRules" 
          label-width="120px"
          status-icon
        >
          <el-form-item label="当前密码" prop="currentPassword">
            <el-input 
              v-model="passwordForm.currentPassword" 
              type="password" 
              placeholder="请输入当前密码"
              show-password
            />
          </el-form-item>
          
          <el-form-item label="新密码" prop="newPassword">
            <el-input 
              v-model="passwordForm.newPassword" 
              type="password" 
              placeholder="请输入新密码"
              show-password
            />
          </el-form-item>
          
          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input 
              v-model="passwordForm.confirmPassword" 
              type="password" 
              placeholder="请再次输入新密码"
              show-password
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitPasswordForm">确认修改</el-button>
            <el-button @click="resetPasswordForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'SecuritySettings',
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  setup() {
    const activeNames = ref(['1']);
    const passwordFormRef = ref(null);
    
    const passwordForm = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    });
    
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (passwordForm.confirmPassword !== '') {
          if (passwordFormRef.value) {
            passwordFormRef.value.validateField('confirmPassword');
          }
        }
        callback();
      }
    };
    
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    
    const passwordRules = {
      currentPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, trigger: 'blur', validator: validatePass },
        { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, trigger: 'blur', validator: validatePass2 }
      ]
    };
    
    const submitPasswordForm = async () => {
      if (!passwordFormRef.value) return;
      
      await passwordFormRef.value.validate((valid) => {
        if (valid) {
          // 调用API修改密码
          ElMessage.success('密码修改成功！');
          resetPasswordForm();
        } else {
          return false;
        }
      });
    };
    
    const resetPasswordForm = () => {
      if (!passwordFormRef.value) return;
      passwordFormRef.value.resetFields();
    };
    
    return {
      activeNames,
      passwordFormRef,
      passwordForm,
      passwordRules,
      submitPasswordForm,
      resetPasswordForm
    };
  }
};
</script>

<style scoped>
.security-settings {
  width: 100%;
  max-width: none;
}

.section-title {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 18px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
</style> 